<template>
  <div style="padding: 0px 5px 5px 5px">
    <div class="backround">
      <div class="list" @click="rowClick($event)">
        <div class="top">
          <div
            class=""
            v-for="col in option.column"
            :key="col.prop"
            :style="getStyle(col)"
          >
            {{ col.label }}
          </div>
        </div>

        <vue-seamless-scroll
          :data="dataList"
          :class-option="optionHover"
          class="seamless-warp"
          :style="tableStyle"
        >
          <div
            class="item"
            v-for="(item, index) in dataList"
            :key="index"
            :data="JSON.stringify(item)"
          >
            <div
              class=""
              v-for="column in option.column"
              :key="column.prop"
              :style="getStyle(column, $scopedSlots)"
            >
              <slot
                :name="getSlotName(column)"
                v-if="getSlotName(column, $scopedSlots)"
                :column="column"
                :row="item"
              ></slot>
              <span v-else>{{ item[column.prop] }}</span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      step: 0.5,
      stop: false,
    };
  },
  computed: {
    optionHover() {
      let step = this.step;
      if (this.stop) {
        step = 0;
      }
      return {
        step: step, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    tableStyle() {
      let style = { height: "200px" };
      if (this.option.height) {
        style.height = `${this.option.height}px`;
      }
      return style;
    },
  },
  methods: {
    getStyle(col) {
      let style = {};
      if (col.width) {
        style.width = col.width + "px";
      }
      return style;
    },
    rowClick(e) {
      const path = e.path || (e.composedPath && e.composedPath());
      let target = path.filter((r) => /item/.test(r.className)); // 这里的 list-item 就是对应子元素的 class
      if (target.length) target = target[0];
      else return;
      const data = JSON.parse(target.getAttribute("data")); // 单项数据详情，点击那行数据的所有数据
      this.$emit('rowClick',data)
    },
    getSlotName(item, slot) {
      let name = item.prop;
      if (slot) return slot[name];
      return name;
    },
    updateStatus(stop) {
      this.stop = stop;
    },
  },
};
</script>
<style scoped>
.backround {
  width: 100%;
}
.seamless-warp {
  overflow: hidden;
}
.list {
  width: 100%;
  .top {
    color: #fccd1d;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    background-color: rgb(8, 54, 78);
    padding: 5px 20px;
  }
  .item {
    color: white;
    display: flex;
    background-color: rgb(8, 54, 78);
    padding: 5px 20px;
    margin-top: 10px;
  }
  .search {
    background-color: rgba(2, 141, 159, 1);
    padding: 10px;
    border-radius: 5px;
    display: flex;
  }
  .info {
    background-color: rgb(8, 54, 78, 1);
    padding: 20px 10px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    div {
      display: flex;
    }
    .line {
      margin-top: 10px;
    }
    .name {
      color: #fccd1d;
    }
  }
}
</style>
